<template>
  <div class="container-app">
    <div class="top-box">
      <div class="menu">
        <div
          @click="clickMenu(item, index)"
          :class="{ 'menu-item-current': index == current }"
          v-for="(item, index) in menuList"
          :key="index"
          class="menu-item"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="title" @click="homeIndex">县域数字农品云综合监管平台</div>
      <div class="menu-right">
        <div
          :class="{ 'menu-item-current': index + 3 == current }"
          v-for="(item, index) in menuListRight"
          :key="index"
          @click="clickMenu(item, index + 3)"
          class="menu-item"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        { title: "数字农田", path: "/DigitalFarmland" },
        { title: "智慧物联", path: "/SmartLnternet" },
        { title: "投入品监督", path: "/lnputSupervision" },
      ],
      menuListRight: [
        { title: "价格行情", path: "/PriceQuotes" },
        { title: "渠道分布" },
        { title: "安全溯源" },
      ],
      current: 999,
    };
  },
  methods: {
    homeIndex() {
      this.current = 999;
      this.$router.push("/home");
    },
    clickMenu(item, index) {
      this.current = index;
      this.$router.push(item.path);
    },
  },
};
</script>

<style lang="scss" scoped>
.container-app {
  width: 1920px;
  height: 1080px;
  background-image: url("../../assets/bg.png");
}
.top-box {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../../assets/government/top.png");
  padding-bottom: 30px;
  height: 109px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.title {
  text-align: center;
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 40px;
  color: #ffffff;
  text-shadow: 0px 3px 5px #073769;
  cursor: pointer;
}
.menu {
  cursor: pointer;
  position: absolute;
  left: 50px;
  top: 5px;
  display: flex;
}
.menu-right {
  cursor: pointer;

  position: absolute;
  display: flex;
  top: 5px;

  right: 50px;
}
.menu-item {
  margin-right: 30px;
  text-align: center;

  font-size: 16px;
  color: #69b2ff;
  width: 120px;
  font-weight: bold;
  height: 42px;
  line-height: 42px;
  background: linear-gradient(0deg, #2285ff5b 0%, #c3edff31 100%);
  background-image: url("../../assets/government/choose-menu.png");

  // box-shadow: 0px 2px 4px 0px rgba(43, 157, 255, 0.93);
  border-radius: 18px;
  // border-image: linear-gradient(0deg, #2285ff, #c3edff) 10 10;
}
.menu-item-current {
  color: white;

  background-image: url("../../assets/government/current.png");
}
</style>
